import React, {memo} from 'react';
import { connect } from 'umi';

import { Modal, Select } from 'antd';

interface DrillListProps {
  visibility: boolean;
  onClose: () => void;
  onSure: (key: string) => void;
  dataSource: any;
}

const DrillList: React.FC<DrillListProps> = memo((props) => {
  const { dataSource, visibility, onClose, onSure } = props;
  let selectValue = dataSource && dataSource.length > 0 ? dataSource[0].value : '';

  const handleChange = (value:string) => {
    selectValue = value
  }

  return (
    <Modal
      title="请选择下钻的维度："
      visible={visibility}
      width={320}
      onOk={() => {
        onSure(selectValue)
      }}
      onCancel={onClose}
    >
      <Select defaultValue={selectValue} style={{ width: 240 }} options={dataSource}  onChange={handleChange}/>
    </Modal>
  );
});
export default connect(({}) => ({}))(DrillList);
